<template>
  <div v-show="editShow">
    <div class="container">
      <el-row :gutter="20">
        <div class="clearfix">
          <div class="crumbs">
            <i class="el-icon-back"></i>
            <el-button type="text" @click="goBack">返回</el-button>
          </div>
          <div class="btn-save">
            <el-button type="primary" @click="saveClick('ruleForm')">保存</el-button>
          </div>
        </div>
        <div class="form-box">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="eidt-el-form">
            <el-form-item label="名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="每天限制次数" prop="rule">
              <el-input v-model="ruleForm.rule" type="number" min="0"></el-input>
            </el-form-item>
            <el-form-item label="使用开始时间" prop="startDate" >
               <el-date-picker v-model="ruleForm.startDate" type="datetime" placeholder="开始日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="使用结束时间" prop="endDate">
               <el-date-picker v-model="ruleForm.endDate" type="datetime" placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <UploadImg @uploadImg="getUploadImg" :editImg="editImg" :imgTitle="imgTitle"></UploadImg>
            <el-form-item label="证件宽(px)" prop="width">
              <el-input v-model="ruleForm.width" type="number" min="0"></el-input>
            </el-form-item>
            <el-form-item label="证件高(px)" prop="height">
              <el-input v-model="ruleForm.height" type="number" min="0"></el-input>
            </el-form-item>
            <el-form-item label="二维码左编辑(px)" prop="qrcodeX">
              <el-input v-model="ruleForm.qrcodeX" type="number" min="0"></el-input>
            </el-form-item>
            <el-form-item label="二维码上边距(px)" prop="qrcodeY">
              <el-input v-model="ruleForm.qrcodeY" type="number" min="0"></el-input>
            </el-form-item>
            <el-form-item label="二维码大小(px)" prop="qrcodeSize">
              <el-input v-model="ruleForm.qrcodeSize" type="number" min="0"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import UploadImg from '../../public/UploadImg'

export default {
  name: "edittypemanage",
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请填写证件类型名称", trigger: "blur" }],
        rule: [{ required: true, message: "请填写限制次数", trigger: "blur" }],
        endDate: [{ required: true, message: "结束日期不能为空", trigger: "blur" }],
        startDate: [{ required: true, message: "开始日期不能为空", trigger: "blur" }],
      },
      ruleForm: {
        name: "",
        rule: "",
        url: "",
        width: "",
        height:"",
        qrcodeX:"",
        qrcodeY:"",
        qrcodeSize:"",
        startDate: "",
        endDate: ""
      },
      editImg:"",
      documentType_Id: "",
      dataList:[],
      imgTitle:'上传证件模板图片/电子证件图片'
    };
  },
  props: {
    editShow: {
      type: Boolean,
      default: false
    },
    arrarList: {
      type: Array,
      default() {
        return [];
      }
    },
    editData: {
      type: Object
    }
  },
  watch: {
    editData: function() {
      const item = this.editData;
      this.ruleForm = item;
      this.documentType_Id = item.documentTypeId;
      this.editImg = item.url;
    }
  },
  methods: {
    saveClick(ruleForm) {
      var s = new Date(this.ruleForm.startDate);
      var state_date = s.getFullYear() + "-" + (s.getMonth() + 1) + 
          "-" +  (s.getDate() < 10 ? "0" + s.getDate() : s.getDate()) + 
          " " + s.getHours() + ":" + s.getMinutes() + ":" + s.getSeconds();

      var e = new Date(this.ruleForm.endDate);
      var end_date = e.getFullYear() +
          "-" + (e.getMonth() + 1) +
          "-" + (e.getDate() < 10 ? "0" + e.getDate() : e.getDate()) +
          " " + e.getHours() +  ":" + e.getMinutes() + ":" + e.getSeconds();
      this.ruleForm = {
        url: this.ruleForm.url,
        name: this.ruleForm.name,
        rule: this.ruleForm.rule,
        width: this.ruleForm.width,
        height: this.ruleForm.height,
        qrcodeX: this.ruleForm.qrcodeX,
        qrcodeY: this.ruleForm.qrcodeY,
        qrcodeSize: this.ruleForm.qrcodeSize,
        startDate: state_date,
        endDate: end_date,
        projectId:localStorage.getItem("project_Id")
      };
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
         if (this.documentType_Id == '' || this.documentType_Id == undefined) {
        
            this.$axios.post("/DocumentType/", this.ruleForm).then(res => {
              if (res.data.hasError == false) {
                this.$message.success("保存成功！");
                this.goBack();
              } else {
                this.$message.error("保存失败！");
              }
            });
          } else {
            this.$axios
              .put("/DocumentType/" + this.documentType_Id + "", this.ruleForm)
              .then(res => {
                if (res.data.hasError == false) {
                  this.$message.success("编辑成功！");
                  this.goBack();
                } else {
                  this.$message.error("编辑失败！");
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    goBack() {
      this.$emit("backFunStu");
      this.documentType_Id="";
      this.$refs['ruleForm'].resetFields();
    },
    getUploadImg(imgSrc){
      this.ruleForm.url = imgSrc;
    }
  },
  components: {
    UploadImg
  }
};
</script>